<template>
    <div class="registerTwo">
        <div class="moduleHead">
            <router-link :to="{ name: 'registerOne' }">
                <span class="back"></span>
            </router-link>
            <span>{{language.unify_welcome}}</span>
        </div>
        <div class="body">
            <div class="select_warapper">
                <div class="line_select_box">
                    <label>{{language.unify_age}}</label>
                    <select v-model="age" dir="rtl" @blur="blurSelect('age')" @change="changeSelect()">
                        <option v-for="item in ageList" :value="item">{{item}}</option>
                    </select>
                </div>
                <div class="line_select_box">
                    <label>{{language.unify_ethnicity}}</label>
                    <select v-model="ethnicity" dir="rtl" @blur="blurSelect('ethnicity')" @change="changeSelect()">
                        <option v-for="item in ethnicityList" :value="item.value">{{item.label}}</option>
                    </select>
                </div>
                <div class="line_select_box">
                    <label>{{language.unify_motorcycle}}</label>
                    <div class="multiple">
                        <div class="multipleHtml">{{motorcycleRender.str}}</div>
                        <select v-model="motorcycleVal" dir="rtl" @change="changeSelect()" multiple>
                            <option v-for="item in motorcycleRender.select" :value="item.value">{{item.label}}</option>
                        </select>
                    </div>
                </div>
                <div class="line_select_box">
                    <label>{{language.unify_country}}</label>
                    <select v-model="r_country" dir="rtl" @change="changeSelect()">
                        <option v-for="item in countryList" :value="item.value">{{item.label}}</option>
                    </select>
                </div>
                <div class="line_select_box" v-if="showState">
                    <label>{{language.unify_state}}</label>
                    <select v-model="r_state_id" dir="rtl" @change="changeSelect()">
                        <option v-for="item in stateList" :value="item.value">{{item.label}}</option>
                    </select>
                </div>
                <div class="line_input_box" v-if="showZip">
                    <label name="r_zip" v-validate="'required'" :class="{'validate-error-color': hasValidateError('r_zip')}"><span v-if="hasValidateError('r_zip')">{{getValidateError('r_zip')}}</span><span v-else>{{language.unify_zipCode}}</span></label>
                    <input name="r_zip" v-model="r_zip" maxlength=10 spellcheck="false" autocapitalize="off" autocorrect="off" autocomplete="off" type="text" @input="inputText">
                </div>
            </div>
            <div class="button_warapper">
                <router-link :to="{ name: 'registerThree' }">
                    <button class="btn btn_nextStep" :class="{opacity: opacity}">
                        <loading :props="{show:loading,type:'btn'}"></loading>
                        {{language.unify_continue}}
                    </button>
                    <!-- <button class="btn btn_nextStep btn_disabled"> Continue </button> -->
                </router-link>
            </div>
        </div>
    </div>
</template>
<script>
import componentsRegisterTwo from '../../common/components/registerTwo'
export default {
    name: 'registerTwo',
    extends: componentsRegisterTwo,
    data() {
        return {
            m_type: '',
        }
    },
    created() {
        let regData = Unit.getObjSessionStorage('ms_register_data') || {};
        this.m_type = regData.m_type || '';
    },

    computed: {
        motorcycleRender: function() {
            let obj = {
                select: Unit.getObjLocalStorage('ms_m_type'),
                str: this.getMultipleSelectLable(Unit.getObjLocalStorage('ms_m_type'), this.m_type, ', '),
            };
            return obj;
        },

        motorcycleVal: {
            get: function() {
                return this.getMultipleSelectArr(this.m_type, Unit.getObjLocalStorage('ms_m_type'));
            },
            set: function(newValue) {
                this.m_type = this.getMultipleSelectValue(newValue);
            }
        },
    },

    methods: {
        updateBtn() {
            let checkData = this.handleUpdateBtnData();
            checkData.push(this.m_type);
            for (let i in checkData) {
                if (checkData[i].toString() == '') {
                    this.opacity = true;
                    return;
                }
            }
            this.opacity = false;
        },
        saveRegData() {
            let regData = this.handleRegData();
            regData.m_type = this.m_type;
            Unit.setSessionStorage('ms_register_data', JSON.stringify(regData));
        },
    },
}

</script>
